import Moveable from 'moveable'
var matrix = [
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1
];
const frameMap = new Map();
export default class CustomMoveable {
  /* warpable */

  static create(main: string, target: string) {
    const $target: HTMLElement = document.querySelector(`${main} ${target}`)
    const $main: HTMLElement = document.querySelector(main)
    const moveable = new Moveable($main, {
      target: $target,
      // If the container is null, the position is fixed. (default: parentElement(document.body))
      container: $main,
      draggable: true,
      resizable: true,
      scalable: true,
      rotatable: true,
      warpable: true,
      // Enabling pinchable lets you use events that
      // can be used in draggable, resizable, scalable, and rotateable.
      pinchable: true, // ["resizable", "scalable", "rotatable"]
      origin: true,
      keepRatio: true,
      // Resize, Scale Events at edges.
      edge: false,
      throttleDrag: 0,
      throttleResize: 0,
      throttleScale: 0,
      throttleRotate: 0
    });
    // moveable.on('clickGroup', e => {
    //   selecto.clickTarget(e.inputEvent, e.inputTarget);
    // })
    /* draggable */
    moveable.on('dragStart', (e) => {
      if (!frameMap.has(e.target)) {
        frameMap.set(e.target, {
          translate: [0, 0]
        });
      }
      const frame = frameMap.get(e.target);
      e.set(frame.translate);
    }).on('drag', ({
      target, transform,
      left, top, right, bottom,
      beforeDelta, beforeDist, delta, dist,
      clientX, clientY
    }) => {
      // TODO 移动，多选
      console.log('onDrag left, top', left, top);
      target!.style.left = `${left}px`;
      target!.style.top = `${top}px`;
      // console.log("onDrag translate", dist);
      // target!.style.transform = transform;
    }).on('dragEnd', ({ target, isDrag, clientX, clientY }) => {
      console.log('onDragEnd', target, isDrag);
    });

    /* resizable */
    moveable.on('resizeStart', ({ target, clientX, clientY }) => {
      console.log('onResizeStart', target);
    }).on('resize', ({ target, width, height, dist, delta, clientX, clientY }) => {
      console.log('onResize', target);
      // TODO 修改大小，多选
      console.log('修改大小：', target)
      delta[0] && (target!.style.width = `${width}px`);
      delta[1] && (target!.style.height = `${height}px`);
    }).on('resizeEnd', ({ target, isDrag, clientX, clientY }) => {
      console.log('onResizeEnd', target, isDrag);
    });

    /* scalable */
    moveable.on('scaleStart', ({ target, clientX, clientY }) => {
      console.log('onScaleStart', target);
    }).on('scale', ({
      target, scale, dist, delta, transform, clientX, clientY
    }: any) => {
      // OnScale
      console.log('onScale scale', scale);
      target!.style.transform = transform;
    }).on('scaleEnd', ({ target, isDrag, clientX, clientY }) => {
      console.log('onScaleEnd', target, isDrag);
    });

    /* rotatable */
    moveable.on('rotateStart', ({ target, clientX, clientY }) => {
      console.log('onRotateStart', target);
    }).on('rotate', ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => {
      console.log('onRotate', dist);
      target!.style.transform = transform;
    }).on('rotateEnd', ({ target, isDrag, clientX, clientY }) => {
      console.log('onRotateEnd', target, isDrag);
    });

    moveable.on('warpStart', ({ target, clientX, clientY }) => {
      console.log('onWarpStart', target);
    }).on('warp', ({
      target,
      clientX,
      clientY,
      delta,
      dist,
      multiply,
      transform
    }) => {
      console.log('onWarp', target);
      // target.style.transform = transform;
      matrix = multiply(matrix, delta);
      target.style.transform = `matrix3d(${matrix.join(',')})`;
    }).on('warpEnd', ({ target, isDrag, clientX, clientY }) => {
      console.log('onWarpEnd', target, isDrag);
    });

    /* pinchable */
    // Enabling pinchable lets you use events that
    // can be used in draggable, resizable, scalable, and rotateable.
    moveable.on('pinchStart', ({ target, clientX, clientY }) => {
      // pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart
      console.log('onPinchStart');
    }).on('pinch', ({ target, clientX, clientY, datas }) => {
      // pinch event occur before drag, rotate, scale, resize
      console.log('onPinch');
    }).on('pinchEnd', ({ isDrag, target, clientX, clientY, datas }) => {
      // pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd
      console.log('onPinchEnd');
    });

    return moveable
  }

}